<template>
<div class="Lists-wrapper">
    <ul class="">
      <li class="item-li"
        v-for="(item, index) in data"
        :key="item.id"
        :class="activeItem===item.id?'active':''"
        @click.stop="toggleItem(item.id)">
          <!-- <span class="arrow" v-if="activeItem===item.id"></span> -->
          <div class="item">
            <!-- <a-icon type="twitter" style="font-size: 50px;" /> -->
            <img class="func-icon" :src="imgsrc(item)" alt="">
            <span class="label">{{item.name}}</span>
          </div>

          <div class="child-pos-area item child-box" ref="childBox" v-show="item.id === activeItem" :class="{leftPos:index<3?true:false}">
              <ul class="sub-ul ">
                <li v-if="!item.children || item.children.length===0">暂无数据</li>
                <li v-else class="sub-li label" v-for="(item) in item.children" :key="item.id" @click="goto(item)">
                {{item.name}}
                </li>
              </ul>
          </div>
      </li>
    </ul>
  </div>
  
</template>
<script>
import xqgl from '@/assets/img/portal/funsIcon_1.png'
import xmgl from '@/assets/img/portal/funsIcon_2.png'
import cpxpgl from '@/assets/img/portal/funsIcon_3.png'
import cpsjgl from '@/assets/img/portal/funsIcon_4.png'
import gygl from '@/assets/img/portal/funsIcon_1.png'
import fwzlgl from '@/assets/img/portal/funsIcon_2.png'
  export default {
    name: 'Lists',
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        activeItem: ''
      }
    },
    computed: {
      childOptions () {
        let currentObj = this.data.find(item => item.id === this.activeItem)
        currentObj = currentObj ? currentObj : {}
        let childOpts = currentObj.children ? currentObj.children : []
        return childOpts
      }
    },
    methods: {
      imgsrc (item) {
        console.log(this.data,'55555555555555555555555555555555');
        
        // if (item.icon && item.icon.startsWith('http')) {
        //   return item.icon
        // }
        if (item.id == 19) {
          return xqgl
        }
        if (item.id == 20) {
          return xmgl
        }
        if (item.id == 29) {
          return cpxpgl
        }
        if (item.id == 30) {
          return cpsjgl
        }
        if (item.id == 31) {
          return gygl
        }
        if (item.id == 32) {
          return fwzlgl
        }
        return fwzlgl
      },
      toggleItem (id) {
        this.activeItem = id
      },
      goto (item) {
        if (item.link.indexOf('http') != -1) {
          window.open(item.link)
        } else {
          this.$router.push({
            path: item.link
          })
        }
      },
      documentClickHandler () {
        this.activeItem = ''
      }
    },
    mounted () {
      console.log(this.data,'444444444444444444444444');
      
      this.activeItem = this.data[0] ? this.data[0].id : ''
      // 点击页面其他地方隐藏第三级列表
      document.addEventListener('click', this.documentClickHandler)
    },
    beforeDestroy () {
      // 解绑事件 点击页面其他地方隐藏第三级列表
      document.removeEventListener('click', this.documentClickHandler)
    },
    watch: {
      activeItem (newId) {
      },
      data: {
        handler: function () {
        },
        deep: true
      }
    }
  }
</script>
<style lang="less" scoped>
ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  white-space: nowrap;
  li {
    // float: left;
    display: inline-block;
  }
}
.Lists-wrapper {
  // padding-left: 5%;
  min-height: 170px;
  .item-li {
    padding: 10px 36px;
    position: relative;
    cursor: pointer;
    &.active {
      box-shadow: 0 0 15px 4px #dedede;
      transition: all 0.3s;
      .item {
        .label {
          color: #274fde;
        }
      }
    }
    .arrow {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -16px;
      border: 8px solid transparent;
      border-top-color: #ffffff;
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .func-icon {
        width: 36px;
        height: 36px;
      }
      .label {
        font-size: 14px;
        margin-top: 10px;
      }
    }
    .child-pos-area {
      min-width: 100%;
      position: absolute;
      bottom: -66px;
      left: 50%;
      transform: translateX(-50%);
      &.leftPos {
        left: 0;
        transform: translateX(0);
      }
    }
  }
  .child-box {
    margin-top: 20px;
    width: 100%;
    .sub-ul {
      text-align: center;
       .label {
        color: #274fde;
        background-color: #e0e7ff;
        padding: 10px;
        border-radius: 3px;
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>